<template>
<div class="tfscrollbarstyle" v-bind:class="easyBg" :style="{'height':win_size.height,'overflow-x':'hidden','width':'200px','position':'fixed','margin-top':'80px'}" >
  <el-menu style="width:100%"
    default-active="2"
    class="el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose"
    @select="handleSelect"
    text-color="#fff"
    active-text-color="#ffd04b"
    :router="false" :background-color="bgColor"
    >

        <el-submenu :index="permission.url" v-for="permission in permissions" :key="permission.id">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>{{permission.permissionName}}</span>
          </template>

          <div v-for="child in permission.children">
            <div v-if="child.children ==null || child.children.length === 0">
              <el-menu-item :index="child.url" > <i class="el-icon-tickets"></i>{{child.permissionName}}</el-menu-item>
            </div>

              <el-submenu :index="child.url" v-else>
                <template slot="title">
                  <i class="el-icon-menu"></i>
                  <span>{{child.permissionName}}</span>
                </template>

                 <el-menu-item :index="child2.url" v-for="child2 in child.children" :key="child2.id"> <i class="el-icon-tickets"></i>{{child2.permissionName}}</el-menu-item>

              </el-submenu >

          </div>
        </el-submenu >
  </el-menu>
</div>


</template>
<script>
  export default {
    computed: {
      bgColor: function () {
        if (this.bgItem === 1) {
          return '#287FC3'
        } else if (this.bgItem === 2) {
          return '#545c64'
        } else {
          return '#DA5854'
        }
      },
      easyBg: function () {
        if (this.bgItem === 1) {
          return 'easyblue'
        } else if (this.bgItem === 2) {
          return 'easyblack'
        } else {
          return 'easyred'
        }
      }
    },
    data () {
      return {
        bgItem: this.sessiongetJSON('user').skin,
        win_size: {
          height: ''
        },
        permissions: this.sessiongetJSON('user').menus
      }
    },
    created () {
      console.log(this.permissions)
      this.setSize()
    },
    methods: {
      handleOpen (key, keyPath) {
        console.log(key, keyPath)
      },
      handleClose (key, keyPath) {
        console.log(key, keyPath)
      },
      setSize () {
        this.win_size.height = (document.documentElement.clientHeight - 80) + 'px'
      },
      toRouter () {
        this.$router.push({path: '/a'})
      },
      changeBackground (item) {
        this.bgItem = this.sessiongetJSON('user').skin
      },
      handleSelect (index, indexPath, item) {
        let menuId

        this.permissions.forEach(element => {
          element.children.forEach(menu => {
            if (menu.url === index) {
              menuId = menu.id
            }
          })
        })

        console.log(menuId + ' ' + index)

        this.$router.push({path: index, query: {id: menuId}})
      }
    }
  }
</script>
<style>
  i.fa {
    vertical-align: baseline;
    margin-right: 10px;
  }
  #menu .el-menu {
    height: 100%;
    background-color: #fff;
    float: left;
    border-right: solid 1px #ccc;
  }
</style>
